<template>
  <div class="profile-container">
    <!-- 导航栏 -->
    <van-nav-bar @click-left="$router.back()" class="page-nav-bar" left-arrow title="个人中心"></van-nav-bar>
    <!-- /导航栏 -->
    <input @change='changefile'  ref='input' type="file" hidden>
    <van-cell @click="imgfunc" title="头像" is-link>
      <div slot="right-icon" style="display:flex;align-items:center;">
        <img  style="width:30px;height: 30px;margin-right:5px" :src="profileInfo.photo" alt="">
        <van-icon name="arrow"/>
      </div>
    </van-cell>
    <van-cell title="昵称" is-link @click="nicknameFlag=true" :value="profileInfo.name"/>
    <van-cell title="性别" @click="genderFlag = true" is-link :value="profileInfo.gender?'女':'男'"/>
    <van-cell title="生日" @click="birthFlag = true" is-link :value="profileInfo.birthday"/>
    <!--  -->
    <van-popup
      v-model="nicknameFlag"
      position="bottom"
      :style="{ height: '100%',background: '#f5f7f9' }"
    >
      <nickname @nickfunc="nickfunc"></nickname>
    </van-popup>
    <van-popup v-model="genderFlag" round position="bottom">
      <gender @genderfunc="genderfunc"></gender>
    </van-popup>
    <van-popup  v-model="birthFlag" round position="bottom">
      <birth @timefunc="timefunc"></birth>
    </van-popup>

    <!-- 图片弹出层 -->
    <van-popup  v-model="photoFlag"  :style="{ height: '100%',background: '#f5f7f9' }"  position="bottom">
     <photo @close='photoFlag=false' :url='profileInfo.photo'></photo>
    </van-popup>
  </div>
</template>
           
<script>
import nickname from './components/nickname'
import birth from './components/birth'
import gender from './components/gender'
import photo from './components/photo'

import { userProfile_api } from '@/api/profile.js'
export default {
  components: {
    nickname,
    birth,
    gender,
    photo
  },
  data() {
    return {
      nicknameFlag: false,
      genderFlag: false,
      birthFlag: false,
      photoFlag:false,

      profileInfo: {}
    }
  },
  created() {
    this.getProfile()
  },
  methods: {
    async getProfile() {
      const { data: res } = await userProfile_api()
      console.log(res, 333444)
      this.profileInfo = res.data
    },
    //   更改昵称后触发父组件中的事件来更改页面上的昵称+关闭对话框
    nickfunc(name) {
      this.nicknameFlag = false
      this.profileInfo.name = name
    },

    //  gender
    genderfunc(gender) {
      this.genderFlag = false
      if (gender) {
        this.profileInfo.gender = 1
      } else {
        this.profileInfo.gender = 0
      }
    },

    //  time
    timefunc(birth){
      console.log(112233);
       this.birthFlag = false
       this.profileInfo.birthday=birth
    },

    /* 图片更改
    1、选择图片
      1、点击图片触发input表单实现选择图片
    2、显示对话框 
      1、对话框中显示的是刚刚上传的图片
      2、显示裁切的效果
      3、取消：关闭对话框
      4、点击确认：关闭对话框+发送请求
    */

/* 点击图片那行，然后实现文件上传的功能 */
   imgfunc(){
      //  点击触发表单的click事件
      /* 
      1、获取input元素
      2、元素.click()
      
      */
     //console.log(this.$refs.input,66666);
     this.$refs.input.click()
   },
   changefile(){
       //3、选择图片获取图片资源
       var  files=this.$refs.input.files[0]
      // console.log(files,5555);
     //  4、将获取的图片资源生成一个file路径  blob
       var url=window.URL.createObjectURL(files)
       //console.log(url,6666);
       //console.log( this.profileInfo.photo,6666);
       // 5、将这个值赋值给img的src属性
       this.profileInfo.photo=url

       ///   二  显示对话框
       this.photoFlag=true

   }
  }
}
</script>
<style scoped  lang='less'>
.profile-container {
  .post-container {
    display: flex;
    align-items: center;
    /deep/.van-field__value {
      background: #eee;
    }

    .comment-btn.van-button--default {
      color: #323233;
      background-color: #fff;
      border: none;
      font-size: 30px;
    }

    .van-button--small {
      padding: 0;
      width: 100px;
    }
  }
}
</style>